#{extends 'front.html' /}
#{set title:productType.name.capitalizeWords()/}
#{set current:'products'/}

<ul class="breadcrumb">
  <li><a href="@{viewContent('home')}">Home</a> <span class="divider">/</span></li>
  <li><a href="@{productList()}">Products</a></li>
  #{list items:parentTypes,as:'parentType'}
  <li><span class="divider">/</span> <a href="@{productList(parentType.id)}">${parentType.name}</a></li>
  #{/list}
  %{if(productType.name != "root"){}%
  	<li class="active"><span class="divider">/</span> ${productType.name.capitalizeWords()}</li>
  %{}}%
</ul>

<ul class="thumbnails">
#{list items:productTypes,as:'productType'}
	<li class="span4 productThumb">
		<div class="thumbnail">
			<div class="caption">
				<h3>${productType.name}</h3>
				<a href="@{productList(productType.urlKey)}"><img src="${play.configuration['attachments.download.prefix']+productType.image}" /></a>
			</div>
		</div>
	</li>
#{/list}

#{list items:products,as:'product'}
	<li class="span4 productThumb">
		<div class="thumbnail">
			<div class="caption">
				<h3>${product.name}</h3>
				<a href="@{productDetails(product.urlKey)}"><img src="${play.configuration['attachments.download.prefix']+product.detailImage}"/></a>
				<p><a href="@{productDetails(product.urlKey)}">${product.summary.replaceAll("\\n","<br>").raw()}</a></p>
			</div>
		</div>
	</li>
#{/list}

</ul>
